<template>
    <div>
        <div class="padding">
            <add-button @click.native="$router.push({path:'/quantity/add/'})"></add-button>
        </div>
        <el-table :data="dataList" default-expand-all style="width: 100%" row-key="id"
                  :tree-props="{children: 'child'}" :indent="30" v-if="dataList.length > 0">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="类型" prop="owner_type.name"></el-table-column>
            <el-table-column label="区域" prop="regional.name"></el-table-column>
            <el-table-column label="年份" prop="year"></el-table-column>
            <el-table-column label="数量" prop="quantity"></el-table-column>
            <!--align:内容对齐，width：单元格宽度-->
            <el-table-column align="right" width="250">
                <template slot-scope="scope">
                    <edit-button @click.native="$router.push({path:'/quantity/edit/'+scope.row.id})"></edit-button>
                    <del-button @click.native="del(scope.row.id)"></del-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="text-center padding-top-bottom-20" v-if="dataList.length > 0">
            <el-pagination
                background
                layout="total,prev, pager, next"
                :page-size="pageSize"
                :current-page.sync="page"
                :total="totalCount"
                @current-change="pageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name: "Quantity",
    data() {
        return {
            page:1,
            pageSize:10,
            totalCount:200,
            content:'',
            dataList: [],
            searchForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods:{
        getList() {
            let _this = this;
            this.$http.httpPost({
                url:'/api/truck/quantityrecord',
                datas:this.searchForm,
                success(res){
                    console.log(res);
                    _this.dataList = res.data ? res.data : [];
                    _this.page = res.current_page;
                    _this.totalCount = res.total;
                }
            })
        },
        pageChange(page) {
            this.page = page;
            this.getList();
        },
        del(id) {
            let _this = this;
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.httpPost({
                    url:'/api/truck/quantityrecord/delete',
                    datas:{"id":id},
                    success(res){
                        _this.$utils.message('删除成功！');
                        _this.getList();
                    }
                })
            }).catch(() => {
                // _this.$utils.warning('取消了');
            });
        }
    }
}
</script>
